import React, { useEffect, useState } from 'react'
import "../css/shop.css"
import { useLocation, useNavigate } from 'react-router-dom'
export default function Navlist() {
    let location = useLocation()
    let navigate = useNavigate()
    let handlerName = (name) => {
        // 存入本地
        localStorage.setItem("name", name)
        // 再一次渲染
        setCheckname(name)
        //跳转页面
        if (name === "首页") {
            navigate("/shop/home")
        } else if (name === "商品") {
            navigate("/shop/list")
        }
    }
    // 
    let url = location.pathname
    useEffect(() => {
        if (url === "/shop/home") {
            setCheckname("首页")
        } else if (url === "/shop/list") {
            setCheckname("商品")
        }
    },[location])
    let [checkname, setCheckname] = useState(localStorage.getItem("name")) || "首页"
    let [cateArr, setCateArr] = useState([{ id: 1, name: "首页" }, { id: 2, name: "商品" }])
    return (
        <>
            {
                cateArr.map((item, index) => {
                    return <div className={item.name == checkname ? "item_nav" : "nav_item_btn"} onClick={() => { handlerName(item.name) }} key={item.id}>{item.name}</div>
                })
            }
        </>
    )
}
